<script setup lang="ts">
  const props = withDefaults(
    defineProps<{
      data: any;
    }>(),
    {}
  );
  // TODO: 状态及其他字段
</script>

<template>
  <div class="flex gap-5 flex-wrap">
    <div
      v-for="(item, index) in data.cabinets"
      :key="index"
      class="cabinet-wrapper px-4 pb-5 pt-2 flex flex-col"
    >
      <div class="flex justify-between align-bottom">
        <h3 class="text-lg">{{ item.cabinetId }}</h3>
        <a-badge v-if="index % 2 === 0" status="success" text="连接正常" />
        <a-badge v-else status="warning" text="连接异常" />
      </div>
      <a-divider margin="6px" />

      <div class="flex flex-col gap-2">
        <span>
          <span class="label">设备编号：</span>
          <span class="value">{{ item.cabinetSn }}</span>
        </span>
        <span>
          <span class="label">锁控编号：</span>
          <span class="value">{{ item.cabinetSn }}</span>
        </span>
        <span>
          <span class="label">摆放位置：</span>
          <span class="value">{{ item.cabinetSn }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .cabinet-wrapper {
    width: 200px;
    border-radius: 2px;
    border: 1px solid #dcdcdc;

    .label {
      color: #666666;
    }

    .value {
      color: #333333;
    }
  }
</style>
